<template>
  <div class="b-rules">
    <ZDragTable v-model="currentTable">
      <el-table-column prop="name"
                       label="Name"></el-table-column>
      <el-table-column>
        <template v-slot:header>
          <span>{{$t('paywall.action')}}</span>
          <el-button type="primary"
                     icon="el-icon-circle-plus-outline"
                     size="mini"
                     class="add-rule-btn"
                     @click="handleOpen('add')">{{$t('paywall.newrules')}}</el-button>
        </template>
        <template v-slot:default="{$index}">
          <div class="rules-table-action flex  items-center">
            <i class="el-icon-edit cursor-pointer inline-flex items-center justify-center"
               style="margin-right:5px"
               @click="handleOpen('edit',$index)"></i>
            <i class="el-icon-delete cursor-pointer inline-flex items-center justify-center"
               @click="handleDelete($index)"></i>
          </div>
        </template>
      </el-table-column>
    </ZDragTable>
    <ZDialog v-model="modelVisible"
             :title="modelTitle"
             width="800px"
             @save="handleSave">
      <AddRuleForm v-if="model === 'add'"
                   ref="add-form" />
      <EditRuleForm v-if="model === 'edit'"
                    :value="currentSelected"
                    ref="edit-form" />
    </ZDialog>
  </div>

</template>

<script>
import ZDragTable from '@/components/storybook/z-drag-table'
import ZDialog from '@/components/storybook/z-dialog/index'
import AddRuleForm from './add-rule-form'
import EditRuleForm from './edit-rule-form'
import { v4 } from 'uuid'
import { get } from 'lodash'
import useRule from '@/components/storybook/hooks/useRule'

export default {
  name: 'BRules',
  components: {
    ZDragTable,
    ZDialog,
    AddRuleForm,
    EditRuleForm
  },
  props: {
    value: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      model: null,
      selectedRule: {},
      form: {}
    }
  },
  computed: {
    modelVisible: {
      get () {
        return !!this.model
      },
      set (val) {
        this.model = !!val
      }
    },
    modelTitle () {
      if (this.model === 'edit') {
        return this.$t('statement.edr')
      }

      if (this.model === 'add') {
        return this.$t('statement.anr')
      }

      return ''
    },
    currentTable: {
      get () {
        return this.value.map(i => ({ ...i, uuid: v4() }))
      },
      set (val) {
        const value = val.map((record, index) => ({ ...record, sort: index }))

        this.$emit('input', value)
      }
    },
    currentSelected () {
      const { id,
        threshold = {},
        appId } = this.selectedRule || {}

      return {
        ...get(threshold, 'extra', {}),
        id,
        appId
      }
    }
  },
  methods: {
    handleOpen (model, index) {
      this.model = model
      if (index >= 0) {
        this.selectedRule = this.currentTable[index]
      }
    },
    handleDelete (i) {
      this.currentTable = this.currentTable.filter((_, index) => index !== i)
    },
    handleSave (event, done) {
      if (this.model === 'add') {
        const form = this.$refs['add-form'].form
        const rule = useRule(form)
        this.currentTable = this.currentTable.concat(rule)
        this.$emit('change', this.currentTable, form)
      }

      if (this.model === 'edit') {
        const form = this.$refs['edit-form'].form
        const rule = useRule(form)

        const index = this.currentTable.findIndex(i => i.uuid === this.selectedRule.uuid)
        const table = [...this.currentTable]
        table[index] = rule
        this.currentTable = table

        this.$emit('change', this.currentTable, form)
      }
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
.b-rules {
  &-action {
    max-width: 60px;
    i {
      width: 24px;
      height: 24px;
      font-size: 16px;
      transition: all 200ms;
      &:hover {
        background-color: #e6f7ff;
        color: #138dc7;
      }
    }
  }
  .add-rule-btn {
    float: right;
  }
}
</style>
